<!-- <template>
    <div> -->
        动态组件
        <!-- 
            component
                是vue的内置组件
                通过控制属性is来显示相应的组件
                is里面写显示的组件名
         -->

         <!-- <Star v-if="flag == true"/>
         <password v-else />
         <step /> -->


         <!-- <component :is="flag" type="text" />
         <button @click="flag = flag == 'Star' ? 'password' : 'Star'">
            切换组件的显示
         </button> -->
    <!-- </div>
</template>
<script> -->
<!-- // 引入评分
import Star from '@/components/homework/start.vue'
// 引入输入框
import password from '@/components/homework/password.vue';
// 引入步骤条
import step from '@/components/homework/step.vue';
export default {
    data() {
        return {
            // true 显示评分 false 显示输入框
            flag: 'Star'
        }
    },
    components: {
        Star,
        password,
        step
    }
} -->
<!-- </script> -->

<style lang="scss" scoped>
    .tab{
        display: flex;
        width: 300px;
        height: 35px;
        line-height: 35px;
        .tabItem,
        .tabItemActive{
            width: 33.33333%;
            box-sizing: border-box;
            height: 35px;
            border: 1px solid #999;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }
        .tabItemActive{
            color: green;
            border-color: green;
            font-weight: bold;
        }
    }
    .content{
        width: 300px;
        box-sizing: border-box;
        height: 249px;
        border: 1px solid #999;
    }
</style>
<template>
    <div>
        <!-- tab导航 -->
        <div class="tab">
            <div 
            :class="tab_index == index ? 'tabItemActive' : 'tabItem'" 
            v-for="(item,index) in tab_arr" :key="item.id"
            @click="tab_index = index">
                {{ item.title }}
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                // 当前显示的tab
                tab_index: 0,
                // tab数据
                tab_arr: [
                    {
                        id: 0,
                        title: '新闻首页',
                        // 显示的组件
                        content: 'Home'
                    },
                    {
                        id: 1,
                        title: '新闻新闻',
                        // 显示的组件
                        content: 'News'
                    },
                    {
                        id: 2,
                        title: '新闻游戏',
                        // 显示的组件
                        content: 'Games'
                    }
                ]
            }
        },
    }
</script>